<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html lang="zh-CN">
<head>
	<title>消息跟踪</title>
</head>
<body>
<div class="row-fluid form-inline">
	<label>热点微博URL :</label>
	<input id="nedAnalyzedUrl" name="nedAnalyzedUrl" type="text" placeholder="http://weibo.com/1263406744/yAmdlulAd" value="">
	<button class="btn" id="hotspread">提交</button>
</div>
<div class="row-fluid">
	<div class="span12"><p id="maincontent"></p></div>
</div>
<div class="row-fluid">
	<div class="span12 sigma-parent" id="sigma-example-parent">
		<div class="sigma-expand" id="sigma-example"></div>
	</div>
</div>
<br>
<div class="row-fluid">
	<div class="span6" id="my_favorite_latin_words" style="height: 350px; border: 1px solid #ccc;"></div>
	<div class="span6"></div>
</div>
<script type="text/javascript">
	function spread() {
		var url0 ="${ctx}/json/content?nedAnalyzedUrl=" + $('#nedAnalyzedUrl').val();
		$.getJSON(url0, function(json){
			$("#maincontent").html(json.ir_status_content)
		});
		
		// Instanciate sigma.js and customize it :
		var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
			defaultLabelColor : '#fff',
			defaultEdgeType : 'curve'
		});
		
		// Bind events :
		var greyColor = '#666';
		sigInst.bind('overnodes',function(event){
			var nodes = event.content;
			var neighbors = {};
			sigInst.iterEdges(function(e){
				if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){
					if(!e.attr['grey']){
						e.attr['true_color'] = e.color;
						e.color = greyColor;
						e.attr['grey'] = 1;
					}
				}else{
					e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
					e.attr['grey'] = 0;
	
					neighbors[e.source] = 1;
					neighbors[e.target] = 1;
				}
			}).iterNodes(function(n){
				if(!neighbors[n.id]){
					if(!n.attr['grey']){
						n.attr['true_color'] = n.color;
						n.color = greyColor;
						n.attr['grey'] = 1;
					}
				}else{
					n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
					n.attr['grey'] = 0;
				}
			}).draw(2,2,2);
		}).bind('outnodes',function(){
			sigInst.iterEdges(function(e){
				e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
				e.attr['grey'] = 0;
			}).iterNodes(function(n){
				n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
				n.attr['grey'] = 0;
			}).draw(2,2,2);
		});
		
		var url1 ="${ctx}/json/spread.json?nedAnalyzedUrl=" + $('#nedAnalyzedUrl').val();
		$.getJSON(url1, function(json){
			for(var index in json.nodes){
				var x=0, y=0;
				if(json.nodes[index].x){
					x = json.nodes[index].x;
					y = json.nodes[index].y;
				}
				
				sigInst.addNode('n' + (json.nodes[index].id|0), {
					'x' : x,
					'y' : y,
					'label' : json.nodes[index].key,
					'size' : json.nodes[index].value/10|1,
					'color' : 'rgb(' + Math.round(Math.random() * 256) + ',' + Math.round(Math.random() * 256) + ',' + Math.round(Math.random() * 256) + ')'
				});
			}
			
			for(var index in json.edges){
				sigInst.addEdge((json.edges[index].id|0), 'n'+(json.edges[index].fromId|0), 'n' + (json.edges[index].toId|0));
			}
			
			// Draw the graph :
			sigInst.draw();
		});
	}
	
	$(function(){
		$('#hotspread').click(spread);
	});
</script>
<script type="text/javascript">
	var word_list = [
		{text: "Lorem", weight: 13, link: "https://github.com/DukeLeNoir/jQCloud"},
		{text: "Ipsum", weight: 10.5, html: {title: "My Title", "class": "custom-class"}, link: {href: "http://jquery.com/", target: "_blank"}},
		{text: "Dolor", weight: 9.4},
		{text: "Sit", weight: 8},
		{text: "Amet", weight: 6.2},
		{text: "Consectetur", weight: 5},
		{text: "Adipiscing", weight: 5},
		{text: "Elit", weight: 5},
		{text: "Nam et", weight: 5},
		{text: "Leo", weight: 4},
		{text: "Sapien", weight: 4},
		{text: "Pellentesque", weight: 3},
		{text: "habitant", weight: 3},
		{text: "morbi", weight: 3},
		{text: "tristisque", weight: 3},
		{text: "senectus", weight: 3},
		{text: "et netus", weight: 3},
		{text: "et malesuada", weight: 3},
		{text: "fames", weight: 2},
		{text: "ac turpis", weight: 2},
		{text: "egestas", weight: 2},
		{text: "Aenean", weight: 2},
		{text: "vestibulum", weight: 2},
		{text: "elit", weight: 2},
		{text: "sit amet", weight: 2},
		{text: "metus", weight: 2},
		{text: "adipiscing", weight: 2},
		{text: "ut ultrices", weight: 2},
		{text: "justo", weight: 1},
		{text: "dictum", weight: 1},
		{text: "Ut et leo", weight: 1},
		{text: "metus", weight: 1},
		{text: "at molestie", weight: 1},
		{text: "purus", weight: 1},
		{text: "Curabitur", weight: 1},
		{text: "diam", weight: 1},
		{text: "dui", weight: 1},
		{text: "ullamcorper", weight: 1},
		{text: "id vuluptate ut", weight: 1},
		{text: "mattis", weight: 1},
		{text: "et nulla", weight: 1},
		{text: "Sed", weight: 1}
	];
	$(function() {
		$("#my_favorite_latin_words").jQCloud(word_list);
	});
</script>
<style type="text/css">
	/* sigma.js context : */
	.sigma-parent {
		position: relative;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		background: #222;
		height:600px;
	}
	.sigma-expand {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.buttons-container {
		padding-bottom: 8px;
		padding-top: 12px;
	}
</style>
</body>
</html>
